<template>
<div style="height: 520px;width: 400px;" class="flex flex-wrap align-center font-sm">
  <template v-for="item in icons">
    <i v-if="item===icon" style="color: red" @click="selectedIcon(item)" :class="item" :key="item"></i>
    <i v-else @click="selectedIcon(item)" :class="item" :key="item"></i>
  </template>
</div>
</template>
<script>
import {iconArr} from "./icons";
export default {
  name: "Icon",
  props:{
    icon:String
  },
  data(){
    return {
       icons: iconArr
    }
  },
  methods:{
    selectedIcon(name) {
      this.$emit('selected', name)
      document.body.click()
    },
  }
}
</script>

<style scoped>

</style>
